<form class="layui-form" action="" method="post" lay-filter="LAY-menu-form-add">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="请输入名称" autocomplete="off" class="layui-input"
                       lay-verify="required" maxlength="30">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">上级菜单</label>
            <div class="layui-input-inline">
                <script type="text/html" template lay-url="/admin/options?menu"
                        lay-done="layui.data.done(d);">
                    <select name="parentId">
                        <option value=""></option>
                        {{#
                            layui.each(d.result, function(index, item){
                        }}
                            <option value="{{item.id}}">{{ item.name }}</option>
                        {{#
                            });
                        }}
                    </select>
                </script>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline">
                <script type="text/html" template>
                    <select lay-verify="required" name="type">
                        {{# for (var i in d.params.typeMap) { }}
                            <option value="{{ i }}">{{ d.params.typeMap[i] }}</option>
                        {{# } }}
                    </select>
                </script>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-inline">
                <input type="text" name="authority" placeholder="请输入权限" autocomplete="off" class="layui-input" maxlength="30">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">跳转地址</label>
            <div class="layui-input-inline">
                <input type="text" name="href" placeholder="请输入跳转地址" autocomplete="off" class="layui-input"
                        maxlength="50">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">图标</label>
            <div class="layui-input-inline">
                <input type="text" name="icon" placeholder="首页菜单栏展示图标" autocomplete="off" class="layui-input"
                       maxlength="20">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="orders" placeholder="请输入排序" autocomplete="off" class="layui-input"
                       maxlength="9" lay-verify="order">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">设置</label>
        <div class="layui-input-inline">
            <input type="checkbox" name="enabled" lay-skin="switch" lay-text="启用|禁用" checked="" value="true">
        </div>
        <div class="layui-input-inline">
            <input type="radio" name="showMenu" value="true" title="首页展示" checked>
            <input type="radio" name="showMenu" value="false" title="首页不展示">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="LAY-menu-form-save">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>

<script>
    layui.use(['admin', 'form'], function () {
        var $ = layui.$
            , admin = layui.admin
            , setter = layui.setter
            , layer = layui.layer
            , response = setter.response
            , form = layui.form;

        form.render(null, 'LAY-menu-form-add');

        //自定义验证规则
        form.verify({
            order: function(val) {
                if(val){
                    return /\d+/.test(val) ? '' : '只能输入数字'
                }
            }
        });

        form.on('submit(LAY-menu-form-save)', function (data) {
            admin.req({
                url: '/admin/menu_auths'
                , type: 'POST'
                , dataType: "json"
                , traditional: true
                , data: data.field
                , success: function (res) {
                    var statusCode = response.statusCode;
                    if (res[response.statusName] == statusCode.ok) {
                        layer.closeAll('page');  //关闭page的弹框
                        layer.msg('添加成功', {
                            icon: 1
                        });
                    }
                }
            });
            return false;
        });
    });

    layui.data.done = function (d) {
        layui.use(['form'], function () {
            var form = layui.form;
            form.render(null, 'LAY-menu-form-add'); //渲染该模板下的动态表单
        });
    };
</script>
